<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <title>产业链图谱</title>
</head>
<style>

    body {
        background-color: white;
    }

    .home-chain-content {
        padding: 0.18rem 0 0;
        background: white;
        /*border-top: 1px solid #F2F2F2;*/
    }

    .home-chain-head {
        padding: 0 .32rem;
    }

    .home-chain-item {
        border-width: 0 0 2px 0;
        height: 0.66rem;
        border-bottom: 2px solid white;
        margin-right: 0.32rem;
    }

    .home-chain-map {
        background-color: #F5F6F8;
        border-radius: 4px;
    }

    .home-chain-active {
        border-bottom: 2px solid #222222;
    }

    .home-chain-num {
        background: rgba(34, 34, 34, 0.3);
        color: white;
        font-weight: bold;
        width: 0.32rem;
        height: 0.32rem;
        text-align: center;
        line-height: 0.32rem;
        border-radius: 2px;
    }

    .home-chain-ns {
        background: #222222;
    }

    .home-chain-name {
        max-width: 2.24rem;
        margin-left: 0.04rem;
        color: rgba(34, 34, 34, 0.45)
    }

    .home-chain-names {
        color: #222222;
    }

    .home-chain-wrap {
        border-top: 1px solid #F2F2F2;
    }

    .home-chain-pad {
        padding: 0 0.32rem;
    }
</style>

<body>
<div class="home-chain-content">
    <div class="home-chain-head  flex-row align-items-center">
    </div>
    <div class="home-chain-pad">
        <div class="home-chain-wrap">
        </div>
    </div>
</div>
</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>

<!--产业链绘图JS-->
<script src="../../js/lodash.min.4.17.11.js"></script>
<script src="../../js/vis-network.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/color.js"></script>
<script src="../../js/vis.js"></script>
<script src="../../js/industryChainGraph.js"></script>
<!--产业链绘图JS-->
<script>
  let pm = {
    pageNum: 1,
    pageSize: 3
  }


  function initPage(params) {
    loadChains()
  }

  function reLoadPage() {
    loadChains()
  }

  function loadChains() {
    // 查询推荐产业链
    Server.homeChain.getRecommendChainList({
      pageNum: pm.pageNum,
      pageSize: pm.pageSize,
      isRecommend: '1'
    }).then(function (res) {
      $('.home-chain-head').html('')
      $('.home-chain-wrap').html('')
      res.data.forEach(function (item, index) {
        if (index === 0) {
          $('.home-chain-head').append('<div class=\'home-chain-item home-chain-active flex-row align-items-center\' onclick=\'changeChain("' + item.industrialCode + '","' + index + '")\'><div class=\'home-chain-num home-chain-ns\'>' + (index + 1) + '</div><div class=\'home-chain-name home-chain-names line1\'>' + item.industrialName + '</div></div>')
          $('.home-chain-wrap').append('<div id=\'home-chain-' + item.industrialCode + '\' class=\'home-chain-map mt10 \' onclick=\'goChainDetail("' + item.industrialCode + '","' + item.industrialName + '")\' ></div>')
          queryMasterGraph(item.industrialCode, 'home-chain-' + item.industrialCode)
        } else {
          $('.home-chain-head').append('<div class=\'home-chain-item flex-row align-items-center\' onclick=\'changeChain("' + item.industrialCode + '","' + index + '")\'  ><div class=\'home-chain-num\'>' + (index + 1) + '</div><div class=\'home-chain-name line1\'>' + item.industrialName + '</div></div>')
          $('.home-chain-wrap').append('<div id=\'home-chain-' + item.industrialCode + '\' class=\'home-chain-map mt10 \' style=\'display: none\' onclick=\'goChainDetail("' + item.industrialCode + '","' + item.industrialName + '")\' ></div>')
        }
      })
    })
  }

  function changeChain(chainCode, index) {
    $('.home-chain-head .home-chain-item').removeClass('home-chain-active')
    $('.home-chain-head .home-chain-num').removeClass('home-chain-ns')
    $('.home-chain-head .home-chain-name').removeClass('home-chain-names')

    $('.home-chain-head .home-chain-item').eq(index).addClass('home-chain-active')
    $('.home-chain-head .home-chain-num').eq(index).addClass('home-chain-ns')
    $('.home-chain-head .home-chain-name').eq(index).addClass('home-chain-names')

    $('.home-chain-map').hide()
    $('.home-chain-map').eq(index).show()
    queryMasterGraph(chainCode, 'home-chain-' + chainCode)
  }

  function queryMasterGraph(chainCode, id) {
    if ($('#' + id).html() === '') {
      Server.homeChain.queryMasterGraph({
        chainCode: chainCode
      }).then(function (res) {
        new IndustryChainGraph('#' + id, {
          data: res,
          width: '100%',
          height: '5rem', // 全高1.02rem + height
          hasEvent: false, // 移除所有操作事件
        })
      })
    }
  }

  function goChainDetail(menuCode, name) {
    jsBridge.openWindow('html/research/industrial-detail.html?menuCode=' + menuCode + '&name=' + name, {}, {noBar: false})
  }

</script>
</html>
